<?xml version="1.0" encoding="utf-8" ?>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<jsp:include page="/commonPart/htmlHeader1.jsp">
	<jsp:param name="title" value="注册账号-CommonWorld" />
</jsp:include>
<body>
<jsp:include page= "/commonPart/bodyHeader1.jsp" ></jsp:include>
<div id = "banner">
	<div class = "wp998">
		<a id = "logo" href = "${initParam.webRootUrl}">CommonWorld</a>
		<h1>会员系统</h1>
		<div class = "clear"></div>
	</div>
</div>

<div id = "CW_Screen">
<style>
#userPage {
	width: 998px;
	border: 1px solid #ddd;
	margin: 0 auto;
	padding: 10px 0px;
	color: #000;
}

#userPage #userForm {
	width: 650px;
	margin: 0 auto;
	font-size: 13pt;
}

#userPage #userForm h2 {
	font-size: 18pt;
	font-weight: normal;
	text-align: left;
	padding-bottom: 10px;
}
#userForm hr {
	height: 2px; 
	width: 650px; 
	border-width: 0; 
	background-color: #ddd; 
}

#userForm table {
	margin: 10px auto;
}

#userPage form th {font-size: 11pt; text-align: right; padding: 10px;}
#userPage form td {vertical-align:middle; text-align: left;}
#userPage form input.TEXT {font-size: 16px; padding: 3px; border:1px solid #ccc; }
#userPage form input.TEXT:FOCUS {boder:1px solid #40AA53; outline: none;}
#userPage form select {font-size:16px; padding: 3px;}

#userPage form input.submit {font-size: 14px; font-weight: bold; padding: 0 5px; height: 30px;}

#userPage form #errorMsg {font-size: 13px; color: red; padding-top: 5px;}
</style>

<div id = "userPage">	
	<form id = "userForm" action="/user/userRegister" method = "post" >
		<h2>加入 CommonWorld</h2><hr/>
		<table cellspacing="0" cellpadding="0">
			<tr class = "tr_email">
				<th>电子邮箱: </th>
				<td><input class = "TEXT" type = "text" name = "email" id = "f_email" style = "width: 200px;" /></td>
			</tr>
			<tr>
				<th>昵称: </th>
				<td><input class = "TEXT" type = "text" name = "name" id = "f_name" maxlength="20" style = "width: 150px;" /><span>不能超过10个字</span></td>
			</tr>
			<tr>
				<th>登录密码: </th>
				<td><input class = "TEXT" type = "password" name = "password" id = "f_password1" style = "width: 150px;" /><span>至少6位</span></td>
			</tr>
			<tr>
				<th>密码确认: </th>
				<td><input class = "TEXT" type = "password" name = "password2" id = "f_password2" style = "width: 150px;" /></td>
			</tr>
			<tr id = "tr_sex">
				<th>性别: </th>
				<td>
					<input type = "radio" name = "sex" value = "男" id = 'sex1' checked="checked" /><label for='sex1'>男</label>&ensp;
					<input type="radio" name = "sex" value = "女" id = 'sex2' /><label for='sex2'>女</label><span> 请选择性别</span>
				</td>
			</tr>
			<tr>
				<th>居住地区: </th>
					<td><select onchange="showcity(this.value, document.getElementById('userCity'));" name="province" id="userProvince">
								<option value=''>--请选择省份--</option>
								<option value=北京>北京</option>
								<option value=上海>上海</option>
								<option value=广东>广东</option>
								<option value=江苏>江苏</option>
								<option value=浙江>浙江</option>
								<option value=重庆>重庆</option>
								<option value=安徽>安徽</option>
								<option value=福建>福建</option>
								<option value=甘肃>甘肃</option>
								<option value=广西>广西</option>
								<option value=贵州>贵州</option>
								<option value=海南>海南</option>
								<option value=河北>河北</option>
								<option value=黑龙江>黑龙江</option>
								<option value=河南>河南</option>
								<option value=湖北>湖北</option>
								<option value=湖南>湖南</option>
								<option value=江西>江西</option>
								<option value=吉林>吉林</option>
								<option value=辽宁>辽宁</option>
								<option value=内蒙古>内蒙古</option>
								<option value=宁夏>宁夏</option>
								<option value=青海>青海</option>
								<option value=山东>山东</option>
								<option value=山西>山西</option>
								<option value=陕西>陕西</option>
								<option value=四川>四川</option>
								<option value=天津>天津</option>
								<option value=新疆>新疆</option>
								<option value=西藏>西藏</option>
								<option value=云南>云南</option>
								<option value=香港>香港特别行政区</option>
								<option value=澳门>澳门特别行政区</option>
								<option value=台湾>台湾</option>
								<option value=海外>海外</option>
						</select>
						<select name = "city" id = "userCity"></select>
						<script src="/js/getcity.js"></script><span>请选择您所在的地区</span>
					</td>
				</tr>
				<tr>
					<th>验证码: </th>
					<td>
						<input type = "text" id = "f_vcode" name = "verifyCode" size = "6" class = "TEXT" />
						<span><a class = "changeImage" href = "javascript:changeImage();">换另外一张图</a></span>				
					</td>
				</tr>
				<tr>
					<th>&nbsp;</th>
					<td>
						<img id = "img_vode" alt = "..." src = "/comWorld/action/captcha" style = "border:2px solid #ccc;" />
						<script>
							function changeImage() {
								document.getElementById("img_vode").src = "/comWorld/action/captcha?t=" + Math.random();
							}
						</script>
					</td>
				</tr>
				<tr>
					<th>&nbsp;</th>
					<td style = "padding: 20px 0;">
						<input type = "submit" value = "注册新用户" class = "submit" />
						<span id = "errorMsg" class = "errorMsg" style = "display: none"></span>
					</td>
				</tr>
		</table>
	</form>
</div>

<script src = "/js/sha1.js"></script>
<script>
var pwd = "";
var pwd2 = "";
$("#userForm").bind('form-pre-serialize', function(event, form, options, veto) {
	pwd = $('#f_password1').val();
	pwd2 = $('#f_password2').val();
	$('#f_password1').val(CryptoJS.SHA1($('#f_password1').val()));
	$('#f_password2').val(CryptoJS.SHA1($('#f_password2').val()));
});


$('#userForm').ajaxForm({
	beforeSubmit: function(a, f, o) {
		if ($('#f_email').val().length == 0) {
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
			$('#f_email').focus();
			$('#errorMsg').html("邮箱地址必须填写");
			$('#errorMsg').show("fast");
			return false;
		}
		var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
		if (!filter.test($('#f_email').val())) {
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
			$('#f_email').focus();
			$('#errorMsg').html("邮箱地址格式不正确");
			$('#errorMsg').show("fast");
			return false;
		}
		
		if ($('#f_name').val().length == 0) {
			$('#f_name').focus();
			$('#errorMsg').html("姓名必须填写");
			$('#errorMsg').show("fast");
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
			return false;
		}
		if (pwd.length < 6) {
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
	       	$('#f_password1').focus();
	      	$('#errorMsg').html("密码长度小于6位");
	      	$('#errorMsg').show("fast");
	      	return false;
		}
		if (!pwd.match(/[0-9]/) || !(pwd.match(/[a-zA-Z]/)) || /\W/.test(pwd)) {
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
			$('#f_password1').focus();
			$('#errorMsg').html("密码必须是字母或特殊符号和数字结合");
	      	$('#errorMsg').show("fast");
	      	return false;
		}
		if (pwd.length == 0 || pwd != pwd2) {
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
			$('#f_password1').focus();
			$('#errorMsg').html("两次密码必须填写，且要匹配");
	      	$('#errorMsg').show("fast");
	      	return false;
		}
		var notify = $("input[name = sex]:checked").val();
		if (!notify) {
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
			$('#errorMsg').html("请选择性别");
	      	$('#errorMsg').show("fast");
	      	return false;
		}
		if ($('#f_vcode').val().length == 0) {
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
			$('#f_vcode').focus();
			$('#errorMsg').html("验证码必须填写");
	      	$('#errorMsg').show("fast");
	      	return false;
		}
	},
	success: function(responseText) {
		if (responseText.length > 0) {
			$('#f_password1').val(pwd);
			$('#f_password2').val(pwd2);
			$('#errorMsg').hide();
			$('#errorMsg').html(responseText);
			$('#errorMsg').show("fast");
		} else {
			location.href = "${initParam.webRootUrl}account/login.jsp";
		}
	}
});
</script>
<div id = "footer">
</div>
</div>
</body>
</html>